<script setup>
import { hotList } from "@/utils/hotList";
import categoryList from "@/utils/categoryList";

// 点击卡片跳转
const handleJumpTo = (item) => {
  if (item.name == "算法相关") {
    uni.navigateTo({
      url: `/pages/algorithm/index`,
    });
  }
};

// 点击跳转到详情页面
const handleJumpToDetail = (item) => {
  uni.navigateTo({
    url: "/pages/detail/index?id=" + item.id,
  });
};

const bannerList = [
  {
    id: 1,
    url: "/static/banner-one.png",
  },
  {
    id: 2,
    url: "/static/banner.png",
  },
];
</script>

<template>
  <view class="home">
    <!-- 页面标题部分 start -->
    <cu-custom bgColor="bg-gradual-blue">
      <block slot="content">面试题分类大全</block>
    </cu-custom>
    <!-- 页面标题部分 end -->
    <!-- 轮播图 start -->
    <view class="banner">
      <swiper
        class="banner-swiper"
        indicator-dots
        autoplay
        interval="5000"
        duration="1000"
        circular
        indicator-color="#e0e0e0"
        indicator-active-color="#0081ff"
      >
        <swiper-item v-for="banner in bannerList" :key="banner.id">
          <image
            :src="banner.url"
            class="banner-image"
            mode="aspectFill"
            show-menu-by-longpress
          />
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播图 end -->
    <!-- 循环列表 start -->
    <view class="cu-bar bg-white">
      <view class="action sub-title">
        <text class="text-xl text-bold text-blue">热门推荐</text>
        <text class="bg-gradual-blue"></text>
      </view>
    </view>
    <view class="list-group">
      <view class="list-item" v-for="item in hotList" :key="item.id">
        <view class="list-item-title" @click="handleJumpToDetail(item)"
          ><view
            class="iconfont icon-hot-for-atmosphere"
            style="color: #ff0000; margin-right: 20rpx"
          >
          </view
          ><view
            style="
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-weight: 500;
            "
            >{{ item.title }}</view
          ></view
        >
      </view>
    </view>
    <!-- 循环列表 end -->
    <!-- 各分类面试题入口 start -->
    <view class="cu-bar bg-white">
      <view class="action sub-title">
        <text class="text-xl text-bold text-blue">分类入口</text>
        <text class="bg-gradual-blue"></text>
      </view>
    </view>
    <view class="grop-card">
      <view
        class="icon-item"
        v-for="item in categoryList"
        :key="item.name"
        @click="handleJumpTo(item)"
      >
        <view class="icon-wrapper">
          <view :class="`icon-large iconfont ${item.icon}`"></view>
        </view>
        <text class="icon-text">{{ item.name }}</text>
      </view>
    </view>
    <!-- 各分类面试题入口 end -->
  </view>
</template>
<style scoped lang="scss">
.banner-swiper {
  height: 300rpx;
  width: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
}
.home {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}
.banner {
  height: 300rpx;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-item {
  padding: 40rpx;
  .list-item-title {
    display: flex;
    align-items: center;
  }
}

.icon-large {
  font-size: 64rpx;
}

.icon-medium {
  font-size: 48rpx;
}

.icon-small {
  font-size: 32rpx;
}

.grop-card {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 30rpx;

  .icon-item {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 0;
    box-sizing: border-box;

    &:active {
      background-color: #f5f5f5;
    }

    .icon-wrapper {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15rpx;

      .iconfont {
        color: blue;
        font-size: 40rpx;
      }
    }

    .icon-text {
      font-size: 26rpx;
      color: #333;
      text-align: center;
    }
  }
}
</style>
